<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("body").append("<ul id='ul1'><a id='li1'></a><li id='li2'></li><li id='li3'></li><li id='li4'></li></ul>")
				
				$("body").append("<ul id='ul1-1'><a id='li1-1'></a><li id='li1-2'></li><li id='li1-3'></li><li id='li1-4'></li></ul>")
				$("body").append("<ul id='ul1-2'><a id='li2-1'></a><li id='li2-2'></li><li id='li2-3'></li><li id='li2-4'></li></ul>")
			
				$.getJSON("js/food.json",function(result){
					$("#ul1").children("#li1").html(result[0][0])
					$("#ul1").children("#li2").html(result[1][0])
					$("#ul1").children("#li3").html(result[1][1])
					$("#ul1").children("#li4").html(result[1][2])
					
					$("#ul1-1").children("#li1-1").html(result[0][1])
					$("#ul1-1").children("#li1-2").html(result[2][0])
					$("#ul1-1").children("#li1-3").html(result[2][1])
					$("#ul1-1").children("#li1-4").html(result[2][2])
					
					$("#ul1-2").children("#li2-1").html(result[0][2])
					$("#ul1-2").children("#li2-2").html(result[3][0])
					$("#ul1-2").children("#li2-3").html(result[3][1])
					$("#ul1-2").children("#li2-4").html(result[3][2])		
				})
		$("ul >li").css("display","none"); 
		$("#li1").click(function(){
			$("#ul1").children("li").toggle();
		})
		$("#li1-1").click(function(){
			$("#ul1-1").children("li").toggle();
		})	
		$("#li2-1").click(function(){
			$("#ul1-2").children("li").toggle();
		})	
				
			})
		</script>
	</head>
	<body>
		
	</body>
</html>
